<!DOCTYPE html>
<html lang="zh">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
	<title>登录家校互动系统</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
	<link rel="shortcut icon" href="favicon.ico" />
	 <link href="__TMPL__css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<link href="__TMPL__css/m.css" rel="stylesheet" type="text/css" />
	<script src="__TMPL__js/jquery.min.js"></script>
	<script src="__TMPL__js/iscroll.js"></script>
	<script src="__TMPL__js/m.js"></script>
	<!--[if lt IE 9]>
	<script src="js/html5.js"></script>
	<![endif]-->
</head> 
<body><!-- 背景可后台替换 -->
<div class="wrap ui-page  ui-body-c ui-page-active webwidth">
	<div class="ui-header">
		<a href="__URL__/im_list" id="icoback" class="header-btn left-pos">返回</a>
		<h1 class="ui-title">与{$tid|getinfo=###,'teacher','XM'}对话中</h1>
		<a href="__URL__/im_info/tid/{$tid}" id="icoinfo" class="header-btn rht-pos">资料</a>
	</div>
		
	<div id="wrapper">
		<div id="chat_chatmsglist" class="chatContent">
		        <volist name="meslist" id="vo">
			<if condition="$vo.send_id eq $user_id">

			<div class="chatItem me"> <!-- 发送者 -->
				<div class="chatItemContent"> 
				<img class="avatar" src="/{$teacher_id|getinfo=###,'teacher','pic'}"> 
				<div class="cloud cloudText"> 
					<div class="cloudPannel" style=""> 
						<div class="sendStatus"></div><div class="cloudBody">
						<div class="cloudContent">   
							<pre style="white-space:pre-wrap">{$vo.content}</pre> 
						</div></div><div class="cloudArrow "></div>
					</div>  
				</div></div>   
			</div>    
<else />
			<div class="chatItem you"><!-- 接收者 -->
				<div class="chatItemContent"> 
				<img class="avatar" src="/{$tid|getinfo=###,'teacher','pic'}"> 
				<div class="cloud cloudText"> 
					<div class="cloudPannel" style=""> 
						<div class="sendStatus"></div><div class="cloudBody">
						<div class="cloudContent">   
							<pre style="white-space:pre-wrap">{$vo.content}</pre> 
						</div></div><div class="cloudArrow "></div>
					</div>  
				</div></div>   
			</div>  
            </if>  
			</volist>
			
		</div>
	</div><!-- /wrapper -->
	
	
	<div class="ui-footinput">
		<div class="input-append text">
        <input  id="send_id" name="send_id" value="{$user_id}" type="hidden"/>
		<input  id="receive_id" name="receive_id" value="{$tuser_id}" type="hidden"/>
		
            <input class="span2" id="content" size="16" type="text" style="width:230px;">
			<button class="btn" id="sendbtn" receive_id="{$tuser_id}" type="button">发送</button>
       </div>
	</div>


</div>

		<script type="text/javascript">
			/*js模拟滚动条
			var myScroll;
			function loaded() {
				myScroll = new iScroll('wrapper',{
				});
			}

			document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
			document.addEventListener('DOMContentLoaded', loaded, false);
			*/
			var gettime="";	
			
		  //-----------------------------------发送消息-------------------------------
			function chat_mes_send(frd_username){
			
				var send_message_data={"send_id":$('#send_id').val(),"receive_id":frd_username,"content":$("#content").val()};
				//window.alert($("#content").val());
				var xmlHttpRequest=$.post("__URL__/im_save",send_message_data,function(data,textstatus){
					if(data=1){
						var date=new Date();
						var nowdate=date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
						$usersenddata=$("#chat_chatmsglist").html()+'<div class="chatItem me"><div class="chatItemContent"><img class="avatar" src="/{$teacher_id|getinfo=###,'teacher','pic'}"><div class="cloud cloudText"><div class="cloudPannel"><div class="sendStatus"></div><div class="cloudBody"><div class="cloudContent"><pre style="white-space:pre-wrap">'+$("#content").val()+'</pre></div></div><div class="cloudArrow "></div></div></div></div></div>';
						$("#chat_chatmsglist").html($usersenddata);
						$("#content").val("");
						$('#wrapper').scrollTop($('#chat_chatmsglist')[0].scrollHeight);
						
					}else{
						$usersenddata=$("#chat_chatmsglist").html()+'<div class="chatItem me"><div class="chatItemContent"><img class="avatar" src="/{$user_id|getinfo=###,'parent','pic'}"><div class="cloud cloudText"><div class="cloudPannel"><div class="sendStatus">失败</div><div class="cloudBody"><div class="cloudContent"><pre style="white-space:pre-wrap">'+$("#content").val()+'</pre></div></div><div class="cloudArrow "></div></div></div></div></div>';
						$("#chat_chatmsglist").html($usersenddata);
						$("#content").val("");
						
						$('#wrapper').scrollTop($('#chat_chatmsglist')[0].scrollHeight);
					}
				})
			}
			$('#sendbtn').click(function(){
				chat_mes_send($(this).attr("receive_id"));
			});
			
			
			
			//--------------------------接收消息-------------------
 			function chat_mes_get(){
				var get_message_data={"receive_id":$('#send_id').val(),"send_id":$('#receive_id').val()};
				
				var xmlHttpRequest=$.post("__URL__/im_get",get_message_data,function(data,textstatus){
					var xmlobjs=xmlHttpRequest.responseXML;
					var mes=xmlobjs.getElementsByTagName("mes");
					if(mes.length>0){
						$sound=$("<bgsound src='msg.wav' loop='1'> ");
					}
					for(var i=0;i<mes.length;i++){
						var send_id=(xmlobjs.getElementsByTagName("send_id"))[i].childNodes[0].nodeValue;
						var content=(xmlobjs.getElementsByTagName("content"))[i].childNodes[0].nodeValue;
						var time=(xmlobjs.getElementsByTagName("time"))[i].childNodes[0].nodeValue;
						var type=(xmlobjs.getElementsByTagName("type"))[i].childNodes[0].nodeValue;

						var get_message=$("#chat_chatmsglist").html()+'<div class="chatItem you"><div class="chatItemContent"><img class="avatar" src="/{$tuser_id|getinfo=###,'parent','pic'}"><div class="cloud cloudText"><div class="cloudPannel"><div class="sendStatus"></div><div class="cloudBody"><div class="cloudContent"><pre style="white-space:pre-wrap">'+content+'</pre></div></div><div class="cloudArrow "></div></div></div></div></div>';
						
						$("#chat_chatmsglist").html(get_message);
						$('#wrapper').scrollTop($('#chat_chatmsglist')[0].scrollHeight);
						$sound.appendTo($("body"));
					}
					// myScroll.refresh();
				})
				
			}
			 chat_mes_get();
			 window.clearInterval(gettime); 
			 gettime=window.setInterval(chat_mes_get,2000); 
			 
			
		</script>

</body>
</html>